<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页数据表格展示</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5">
    <h1 class="d-flex justify-content-between align-items-center">
        分页数据表格展示
        <div>
            <input type="text" id="uname" class="form-control me-2" placeholder="搜索...">
            <button id="searchButton" class="btn btn-primary" onclick="fetchData()">搜索</button>
        </div>
    </h1>
    <table class="table table-striped">
        <thead>
        <tr>
            <th style="width:300px;">评论</th>
            <th>微博</th>
            <th>主页</th>
            <!--<th>id</th>-->
        </tr>
        </thead>
        <tbody id="data-table-body"></tbody>
    </table>

    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center mt-3" id="pagination"></ul>
    </nav>
</div>

<script>
    var apiUrl = '/WeiboComment';
    var currentPage = 1;
    var itemsPerPage =10;
    let pageNo;
    let uname;

    $(document).ready(function() {

        const quesyString = window.location.search;
        const queryParams = new URLSearchParams(quesyString);
        pageNo = queryParams.get("page");
        uname = queryParams.get("uname");
        $('#uname').val(uname);

        fetchData();
    });

    function fetchData() {

        if(uname == "" || uname == undefined){
            uname = $('#uname').val();
        }
        if(null!=pageNo){
            currentPage = Number(pageNo);
        }
        $.ajax({
            url: apiUrl,
            method: 'GET',
            data: {
                begin: itemsPerPage*(currentPage-1),
                offset: itemsPerPage,
                blogerName:uname
            },
            dataType: 'json',
            success: function(response) {
                renderData(response.data);
                renderPagination(response.total, currentPage, itemsPerPage);
            },
            error: function(xhr, status, error) {
                console.error('获取数据失败:', error);
            }
        });
    }

    function renderData(data) {
        $('#data-table-body').empty();
        $.each(data, function(index, item) {
            //$('#data-table-body').append('<tr><td>' + item.text + '</td><td><a target="_blank" href="https://weibo.com/detail/'+item.weiboId+'">微博</a> ' + '</td><td> <a target="_blank" href="https://weibo.com/u/'+item.userId + ' ">'+item.userName+'</a> </td><td>'+ item.id  + '</td></tr>');
            $('#data-table-body').append('<tr><td>' + item.text + '</td><td><a target="_blank" href="https://weibo.com/detail/'+item.weiboId+'">微博</a> ' + '</td><td> <a target="_blank" href="https://weibo.com/u/'+item.userId + ' ">'+item.userName+'</a> </td></tr>');
        });
    }

    function renderPagination(totalItems, currentPage, itemsPerPage) {
        $('#pagination').empty();
        var totalPages = Math.ceil(totalItems / itemsPerPage);

        var startPage = Math.max(currentPage - 4, 1);
        var endPage = Math.min(currentPage + 4, totalPages);

        if (currentPage > 1) {
            $('#pagination').append('<li class="page-item"><a class="page-link" href="" data-page="' + (currentPage - 1) + '">&laquo;</a></li>');
        }

        for (var i = startPage; i <= endPage; i++) {
            var activeClass = (i === currentPage) ? ' active' : '';
            $('#pagination').append('<li class="page-item' + activeClass + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>');
        }

        if (currentPage < totalPages) {
            $('#pagination').append('<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&raquo;</a></li>');
        }
    }

    $('#pagination').on('click', 'a', function(e) {
        e.preventDefault();
        var page = $(this).data('page');
        /*if (page) {
            currentPage = page;
            fetchData(currentPage);
        }*/
        window.location.href="/index.html?page="+page+"&uname="+uname;
    });

</script>
</body>
</html>
